import { styled } from '@linaria/react';
import { sleep } from '@pxxtech/utils';
import { ListView, List, Image, Tabs } from '@pxxtech/mobile';

interface RequestParams {
  page: number;
  pageSize: number;
  [key: string]: any;
}

const Container = styled.div`
  width: 100%;
  height: 100%;
  background: #f5f7fa;
`;

const users = [
  {
    avatar:
      'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Novalee Spicer',
    description: 'Deserunt dolor ea eaque eos',
  },
  {
    avatar:
      'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
    name: 'Sara Koivisto',
    description: 'Animi eius expedita, explicabo',
  },
  {
    avatar:
      'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Marco Gregg',
    description: 'Ab animi cumque eveniet ex harum nam odio omnis',
  },
  {
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: 'Edith Koenig',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
  {
    avatar:
      'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: '诺瓦莉·斯派塞',
    description: 'Deserunt dolor ea eaque eos',
  },
  {
    avatar:
      'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
    name: '萨拉·科伊维斯托',
    description: 'Animi eius expedita, explicabo',
  },
  {
    avatar:
      'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: '马可·格雷格',
    description: 'Ab animi cumque eveniet ex harum nam odio omnis',
  },
  {
    avatar:
      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    name: '伊迪丝·柯尼希',
    description: 'Commodi earum exercitationem id numquam vitae',
  },
];

const request1 = async (params: RequestParams) => {
  console.log('request1-start', params);
  await sleep(1600);
  console.log('request1', params);
  return { list: users, total: 64 };
};
const request2 = async (params: RequestParams) => {
  await sleep(1600);
  console.log('request2', params);
  return { list: [], total: 0 };
};
const request3 = async (params: RequestParams) => {
  await sleep(1600);
  console.log('request3', params);
  if (params.page === 3) {
    return Promise.reject('请求错误');
  }
  return { list: users, total: 64 };
};

export default () => {
  function rListView(request: any, inx: number) {
    return (
      <ListView
        key={inx}
        uniqueKey={`ListView_${inx}`}
        request={request}
        defaultPageSize={4}
        style={{ '--height': 'calc(100vh - 45px)' }}
      >
        {(data) => {
          return (
            <List>
              {data.map((user, inx) => {
                return (
                  <List.Item
                    key={inx}
                    prefix={
                      <Image
                        src={user.avatar}
                        style={{ borderRadius: 20 }}
                        fit="cover"
                        width={40}
                        height={40}
                      />
                    }
                    description={user.description}
                  >
                    {user.name}
                  </List.Item>
                );
              })}
            </List>
          );
        }}
      </ListView>
    );
  }
  return (
    <Container>
      <Tabs>
        <Tabs.Tab title="基础" value="1">
          {rListView(request1, 1)}
        </Tabs.Tab>
        <Tabs.Tab title="空数据" value="2">
          {rListView(request2, 2)}
        </Tabs.Tab>
        <Tabs.Tab title="请求错误" value="3">
          {rListView(request3, 3)}
        </Tabs.Tab>
      </Tabs>
    </Container>
  );
};
